<template>
  <div style="width: 70%;margin: 0 auto;background-color: #fdfdfd;border-radius: 12px;padding: 20px 15px">
    <el-row class="usr_info clearfix">
      <el-col :span="18" class="usr_info_left_box">
        <h2 style="font-size: 32px;text-align: left;padding: 0 0 20px">{{ company.name }}</h2>
        <ul style="display: block;border-left: 3px solid #5fe256;padding: 3px 10px ">
          <li>{{ '公司位置：' + company.location }}</li>
          <li>{{ '职位：' + company.my_staff }}</li>
          <li>{{ '职工人数：' + company.staff_count }}</li>
          <li>企业认证：
            <i v-if="!company.auth" style="color: #f40" class="el-icon-warning-outline">尚认证</i>
            <i v-else style="color: #0ebc39" class="el-icon-circle-check">已认证</i>
          </li>
        </ul>
        <div style="text-align: left;font-size: 13px;border-left: 3px solid #5fe256;padding: 3px 10px">
          工作地址：{{ company.work_location }}
        </div>
        <div style="display: block;width: 80%;margin: 15px 0;height: 20px">
          <el-tag
              :key="label"
              v-for="label in company.labels"
              closable
              :disable-transitions="false"
              class="tag-item"
              size="small"
              @close="handleClose(label)">
            {{ label }}
          </el-tag>
          <el-input
              class="input-new-tag tag-item"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              v-on:keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm "
          >
          </el-input>
          <el-button v-else
                     class="button-new-tag tag-item"
                     size="small" @click="showInput"
          >+ New Tag
          </el-button>
        </div>
      </el-col>
      <el-col :span="3" :push="2" class="usr_info_right_box">
        <el-image
            :src="company.head_img_src"
        >
          <template #placeholder>
            <div class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </template>
        </el-image>
      </el-col>
    </el-row>
    <el-divider content-position="left"><span style="font-size: 18px;letter-spacing: 1rem">企业介绍</span></el-divider>
    <el-row class="template_mes">
      <p v-for="value in company.intro" :key="value">{{ value }}</p>
    </el-row>
  </div>
</template>

<script>

export default {
  name: "company.admin_qyjj",
  emits: ['title'],
  data() {
    return {
      inputVisible: false,
      inputValue: '',
      company: {
        name: '阿里巴巴集团',
        location: '中国 浙江杭州',
        my_staff: 'CEO',
        staff_count: '50',
        intro: ['阿里巴巴网络技术有限公司（简称：阿里巴巴集团或阿里巴巴）是以曾担任英语教师的马云为首的18人于1999年在浙江省杭州市创立的公司。  ',
          '阿里巴巴集团经营多项业务，另外也从关联公司的业务和服务中取得经营商业生态系统上的支援。业务和关联公司的业务包括：淘宝网、天猫、聚划算、全球速卖通、阿里巴巴国际交易市场、1688、阿里妈妈、阿里云、蚂蚁金服、菜鸟网络等。  ',
          '2014年9月19日，阿里巴巴集团在纽约证券交易所正式挂牌上市，创造了史上最大IPO记录，股票代码“BABA”，创始人为马云。2019年11月26日，阿里巴巴港股上市，总市值超4万亿，登顶港股成为港股“新股王”。',
          '2019年9月1日，2019中国服务业企业500强榜单在济南发布，阿里巴巴集团控股有限公司排名第24位。9月6日，阿里巴巴集团宣布20亿美元全资收购网易考拉，领投网易云音乐7亿美元融资。10月，2019福布斯全球数字经济100强榜位列10位。10月23日， 2019《财富》未来50强榜单公布，阿里巴巴集团排名第11。“一带一路”中国企业100强榜单排名第5位。11月16日，胡润研究院发布《2019胡润全球独角兽活跃投资机构百强榜》，阿里巴巴排名第7位。12月，阿里巴巴集团入选2019中国品牌强国盛典榜样100品牌。  ',
          '2020年1月11日，鼠年春晚首次联排当日，阿里巴巴宣布其成为独家电商合作伙伴，并提供电商补贴。 '],
        labels: [
          '大厂', '优质岗位', '丰厚补贴', '员工福利'
        ],
        auth: true,
        work_location: '上海市 黄浦区 来福士广场 上海来福士广场办公楼21层2121室',
        head_img_src: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
      },
    }
  },
  setup(prop, context) {
    context.emit('title', '企业简介')
    return {
    }
  },
  methods: {
    handleClose(tag) {
      // this.company.labels.splice(this.company.labels.indexOf(tag), 1);
      this.company.labels = this.company.labels.filter(t => t != tag)
      console.log(this.company.labels)
    },
    showInput() {
      this.inputVisible = true;
      // eslint-disable-next-line no-unused-vars
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      const reg = /^[\u4e00-\u9fa5_a-zA-Z0-9-]{1,8}$/g;
      if (inputValue && reg.test(inputValue)) {
        if (this.company.labels.indexOf(inputValue.replace(' ', '')) === -1) {
          this.company.labels.push(inputValue);
          this.$ElMessage.success('标签插入成功')
        } else this.$ElMessage.error('已存在该标签')
      } else if (inputValue.length !== 0) {
        this.$ElMessage.error('对不起，输入的标签限8个字符，支持中英文、数字、减号或下划线')
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
}
</script>

<style scoped>
.usr_info {
  width: 100%;
}

.usr_info .usr_info_left_box ul {
  margin: 15px 0;
  display: block;
  height: 20px;
}

.usr_info .usr_info_left_box ul li {
  float: left;
  list-style: none;
  /*display: inline-block;*/
  line-height: 20px;
  padding: 0 15px;
  border-right: 1px solid #bababa;
  font-size: 13px;
}

.usr_info .usr_info_left_box ul li:first-child {
  padding-left: 0;
}

.usr_info .usr_info_left_box ul li:last-child {
  border: none;
}

.tag-item {
  float: left;
  margin: 0 5px;
}

.template_mes p {
  text-align: left;
  line-height: 1.5rem;
  text-indent: 2rem;
}


.button-new-tag.el-button--small {
  padding: 0 10px;
  min-height: 24px;
}

.input-new-tag.el-input--small {
  width: 80px;
  vertical-align: bottom;
  line-height: 24px;
}

.input-new-tag.el-input--small >>> .el-input__inner {
  line-height: 24px;
  height: 24px;
  padding: 0 10px;
}
</style>
